<template>
  <n-config-provider>
    <n-grid :x-gap="10" :y-gap="5" :cols="4">
      <n-grid-item>
        <n-input v-model:value="pname" type="text" placeholder="请输入商品名称" size="medium" @input="debunceInput" clearable></n-input>
      </n-grid-item>
      <n-grid-item>
        <n-button type="success" size="medium" @click="handelSearch">
          查询
        </n-button>
      </n-grid-item>
    </n-grid>
    <n-data-table
    :columns="columns"
    :data="plist"
    :pagination="pagination"
    :bordered="false"
    class="ptable"
  />
  </n-config-provider>
</template>

<script setup>
import { NButton, NImage, NTab, NTag, useDialog, useMessage } from 'naive-ui';
import { productGetApi, productSearchApi, productDelchApi} from '../../api/product';
import { ref,h } from 'vue';
import { NConfigProvider } from 'naive-ui'
import { useRouter} from 'vue-router';
import { useAccount } from '../../store/account';
import usePermission from '../../hooks/permissions';
import { useDebounceFn } from '@vueuse/core';

const plist = ref([]);
// 数据请求
productGetApi().then(res => {
  console.log(res);
  plist.value = res.data.data;
})
// 表格配置
function createColumns({
del,
edit
}) {
  return [
    {
      title: "商品ID",
      key: "_id"
    },
    {
      title: "商品名称",
      key: "name"
    },
    {
      title: "主类目",
      key: "fnjiType",
      render(row){
        let type = row.fnjiType==2?'success':'info'
        let title = row.fnjiType==2?'家居':'家具'
        return h(NTag,{type},{default:()=>title}) 
      }
    },
    {
      title: "子类目",
      key: "category"
    },
    {
      title: "封面图",
      key: "picLeft",
      render(row){
        let src = `https://omsv2-static.fnji.com/${row.picLeft}`
        // return h('img',{src,class:'poster'})
        return h(NImage,{src,width:50})
      }
    },
    {
      title: "操作",
      key: "actions",
      render(row) {
        const btns=[
          {title:'编辑',type:'info',fuc:()=>{edit(row)},disabled:false},
          {title:'删除',type:'info',fuc:()=>{del(row)},disabled:!canUse},
        ]
        const btnsNode = btns.map((item)=>{
          return h(
            NButton,
            {
              type:item.type,
              onClick:item.fuc,
              disabled:item.disabled,
            },
            { default: () => item.title}
          )
        })
        return btnsNode
      }
    }
  ];
};
const message = useMessage();
const router = useRouter();
const dialog = useDialog();
const columns = createColumns({
  edit(row) {
    router.push({
      path:'/product/edit',
      query:row,
    })
  },
  async del(row) {
    console.log('删除');
    dialog.warning({
      title: "警告，删除后无法找回",
      content: `你确定要删除《${row.name}》吗？`,
      positiveText: "确定",
      negativeText: "取消",
      draggable: true,
      onPositiveClick: async() => {
        let res = await productDelchApi(row._id)
        if(res.data.code==1){
          let list = plist.value.filter(item=>item._id!=row._id)
          plist.value = list //更新本地
        }
      },
    });
  }
});
const pagination = ref({
  pageSize: 5,
})

// 搜索
const pname = ref('')
const handelSearch =async () => {
  let res = await productSearchApi({pname:pname.value})
  plist.value = res.data.data
}

const {canUse} = usePermission(['root','admin'])

// 搜索防抖
const debunceInput = useDebounceFn(()=>{
  handelSearch()
},500)
</script>

<style lang="scss" scoped>
//深度选择器
.ptable :deep(.poster){
  height: 50px;
}
</style>